<template>
	<view style="width: 750upx; overflow: hidden;">
		<uni-segmented-control :current="current" :values="tabArray" @clickItem="tabClick" styleType="text" activeColor='#d81e06'></uni-segmented-control>
		<mix-pulldown-refresh ref="mixPulldownRefresh" class="panel-content" :top="80" @refresh="onPulldownReresh" @setEnableScroll="setEnableScroll">
			<scroll-view class="panel-scroll-box" :scroll-y="true" @scrolltolower="loadMore" :style="{height: 'calc(100% - ' + pageTop + 'px)'}">
				<view class="goos_container">
					<view v-for="(item,index) in allTradeList" :key='index' class="goos_lists">
						<view class="space_between">
							<view class="time_clock flex_row ">
								<image class="clock_image" src="/static/order/clock.png"></image> <text class="goods_time">{{item.addtime}}</text>
							</view>
							<view class="_state  align_items_center">
								<!-- is_comment: 1 //是否评价
								is_confirm: 1 是否确认收货
								is_delete: 0 是否删除
								is_pay: 1 是否支付
								is_send: 1 是否发货
								is_shouhou: 0 是否要售后 -->
								<text class="goods_state" v-if="item.is_delete==1">已取消</text>
								<text class="goods_state" v-else-if="item.is_pay==0">未支付</text>
								<text class="goods_state" v-else-if="item.is_send==0&&item.is_pay==1">待发货</text>
								<text class="goods_state" v-else-if="item.is_confirm==0">待收货</text>
								<text class="goods_state" v-else-if="item.is_comment==0">待评价</text>
								<!-- <image v-if="item.state == 4" class="delete_image" src="/static/order/delete.png"></image> -->
							</view>
						</view>
						<view @click="goToPage(item)" class="sigle_goos_list">
							<view class="image_contaner">
								<image class="goods_image" :src="baseURL+item.cover_pic"></image>
							</view>
							<view class="goods_description flex_row">
								<view class="title_size flex_column">
									<text class="goods_title">{{item.g_name}}</text>
									<text class="goods_size">{{item.content.guige}}</text>
								</view>	
								<view class="money_amount  flex_column">
									<text class="goods_money">￥{{item.g_money}}</text>
									<text class="goods_amount">X {{item.content.num}}</text>
								</view>
							</view>
						</view>
						<view class="separate_line"></view>
						<view class="bottom_amount_money">
							<text class="_amount">共{{item.content.num}}件商品</text>
							<text class="need_pay" v-if="item.state == 1">
								需付款 ：</text>
							<text class="need_pay" v-if="item.state == 3 || item.state == 4 || item.state == 2"> 实付款 ：</text>
							<text class="_money">￥{{item.totle_price}}</text>
						</view>
						<view class="state_btn">
							<!-- <view class="total-price">合计：{{item.totle_price}}</view> -->
							<!-- <view class="btn cancel-btn" v-if="item.status==10" @click="set_status(item.order_sn,0)">
								取消订单
							</view>
							<view class="btn topay-btn" v-if="item.status==10" @click="gopay(item.amount,item.order_sn,item.order_pay_type)">
								马上付款
							</view>
							<view class="btn topay-btn" v-if="item.status==30" @click="set_status(item.order_sn,40)">
								确定收货
							</view> -->
							<text class="_btn" v-if="item.is_pay==0&&item.is_delete==0" @click="cancelOrder(item.id)">取消订单</text>
							<text class="_btn" v-if="item.is_pay==0&&item.is_delete==0">马上付款</text>
							<text class="_btn" v-if="item.is_pay==1&&item.is_send==1&&item.is_confirm==0" @click="viewWL(item.wuliu_num)">查看物流</text>
							<text class="_btn" v-if="item.is_pay==1&&item.is_send==1&&item.is_confirm==0" @click="submitRecive(item.id)">确定收货</text>
							<text class="_btn" v-if="item.is_pay==1&&item.is_send==1&&item.is_confirm==1&&item.is_comment==0" @click="pingjia(item.order_num)">去评价</text>
						</view>
						
						
						
						
						<view v-show="index !== list.length-1" class="separate"></view>
					</view>
				</view>
				<mix-load-more :status="loadMoreStatus"></mix-load-more>
			</scroll-view>
		</mix-pulldown-refresh>
	</view>
</template>

<script>
	import uniSegmentedControl from '@/components/shopComponents/order/uni-segmented-control.vue'
	
	import mockData from '@/data/order.js'
	
	
	import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
	import mixLoadMore from '@/components/mix-load-more/mix-load-more';

	export default {
		components: {
			uniSegmentedControl,
			mixLoadMore,
			mixPulldownRefresh
		},
		data() {
			return {
				notPayList: [],
				notReceiveList: [],
				notEvaluateList: [],
				tradeDoneList: [],
				
				baseURL:this.$API.baseURL,
				tabArray: ['全部', '待发货', '待收货', '待评价'],
				current: 0,
				allTradeList: [],
				page:1,
				row:5,
				pageTop:uni.upx2px(0),
				userid:uni.getStorageSync("userid"),
				loadMoreStatus:false
			};
		},
		onShow(options) {
			// console.log(this.current)
			this.onPulldownReresh();
		},
		onLoad(options) {
			// this.current=options.index;
			this.allTradeList = mockData.allTradeList;
			
			this.loadMoreStatus = true;
			
			
			if(options.act){
				this.current=options.act
			}
			
			// this.onPulldownReresh();
		},
		methods: {
			pingjia(order_num){
				uni.navigateTo({
					url: 'pingjia?order_num='+order_num,
				});
			},
			viewWL(num){
				uni.navigateTo({
					url: 'wuliu?id='+num,
				});
			},
			tabClick(index) {
				if (this.current != index) {
					this.current = index;
					this.loadMoreStatus = true;
					this.onPulldownReresh();
				}
			},
			//下拉刷新
			onPulldownReresh(){
				this.page = 1;
				this.allTradeList = [];
				if(this.current==0){
					this.mallOrder_list('{u_id:'+this.userid+'}','refresh');//全部
				}else if(this.current==1){
					this.mallOrder_list('{u_id:'+this.userid+',is_pay:1,is_send:0}','refresh');//待发货
				}else if(this.current==2){
					this.mallOrder_list('{u_id:'+this.userid+',is_pay:1,is_send:1,is_confirm:0}','refresh');//待收货
				}else{
					this.mallOrder_list('{u_id:'+this.userid+',is_pay:1,is_send:1,is_confirm:1,is_comment:0}','refresh');//待评价
				}
			},
			//上滑加载
			loadMore(){
				// console.log('loadMore')
				this.loadMoreStatus = true;
				this.page++;
				
				if(this.current==0){
					this.mallOrder_list('{u_id:'+this.userid+'}');//全部
				}else if(this.current==1){
					this.mallOrder_list('{u_id:'+this.userid+',is_send:0}');//待发货
				}else if(this.current==2){
					this.mallOrder_list('{u_id:'+this.userid+',is_confirm:0,is_send:1}');//待收货
				}else{
					this.mallOrder_list('{u_id:'+this.userid+',is_confirm:1,is_comment:0}');//待评价
				}
				
				// this.loadNewsList('add');
			},
			//设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
			setEnableScroll(enable){
				// if(this.enableScroll !== enable){
				// 	this.enableScroll = enable;
				// }
			},
			//获取列表
			mallOrder_list(datas,type){
				var _this = this;
				uni.request({
					url:this.$API.mallOrder_list,
					method:"POST",
					data:{page:this.page,rows:this.row,where:datas},//is_send:0    待收货  is_confirm:0  is_send:1   待评价   is_confirm:1   is_comment:0
					header:this.$API.get_head(),
					success: (res) => {
						var resData = res.data.rows
						resData.forEach(function(v,i){
							resData[i].content = JSON.parse(v.content);
						})
						_this.allTradeList = _this.allTradeList.concat(resData);
						if(type === 'refresh'){
							_this.$refs.mixPulldownRefresh && _this.$refs.mixPulldownRefresh.endPulldownRefresh();
						}
						_this.loadMoreStatus = false;
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
						if(type === 'refresh'){
							_this.$refs.mixPulldownRefresh && _this.$refs.mixPulldownRefresh.endPulldownRefresh();
						}
						_this.loadMoreStatus = false;
					}
				})
			},
			//取消订单
			cancelOrder(id){
				var _this = this;
				uni.showModal({
					title: '提示',
					content: '是否要取消订单',
					success: res => {
						if(res.confirm){
							uni.request({
								url:_this.$API.cancelOrder,
								method:"POST",
								data:{
									orderId:id,
									// userid:_this.userid
								},
								header:_this.$API.get_head(),
								success: (res) => {
									if(res.data.success){
										_this.onPulldownReresh();
									}
									uni.showToast({
										title: res.data.message
									});
								},
								fail: () => {
									uni.showToast({
										title:"加载失败",
										icon:'none'
									})
								}
							})
						}
					},
				});
			},
			//确定收货
			submitRecive(orderId){
				var _this = this;
				uni.showModal({
					title: '提示',
					content: '是否要确认收货',
					success: res => {
						if(res.confirm){
							uni.request({
								url:_this.$API.submitRecive,
								method:"POST",
								data:{
									orderId:orderId,
									userid:_this.userid
								},
								header:_this.$API.get_head(),
								success: (res) => {
									if(res.data.success){
										_this.onPulldownReresh();
									}
									uni.showToast({
										title: res.data.message
									});
								},
								fail: () => {
									uni.showToast({
										title:"加载失败",
										icon:'none'
									})
								}
							})
						}
					},
				});
			}
		},
		
	}
</script>

<style lang="scss">
	.goos_container {
		display: flex;
		flex-direction: column;
		// padding-bottom: 50upx;
	}
	
	.goos_lists {
		display: flex;
		flex-direction: column;
	}
	
	.time_clock {
		margin-top: 38upx;
		margin-bottom: 24upx;
		margin-left: 33upx;
		align-items: center;
	}
	
	.clock_image {
		width: 33.3upx;
		height: 33.3upx;
		margin-right: 10upx;
	}
	
	.goods_time {
		font-size: 25upx;
		color: #1a1a1a;
		opacity: 0.5;
	}
	
	._state {
		margin-right: 33upx;
	}
	
	.goods_state {
		color: $theme-color;
		font-size: 28upx;
	}
	
	.delete_image {
		width: 33upx;
		height: 33upx;
		margin-left: 15.9upx;
	}
	
	.sigle_goos_list {
		display: flex;
		padding-bottom: 26upx;
	}
	
	.image_contaner {
		width: 133.3upx;
		height: 133.3upx;
		margin: 0 33upx 0 33upx;
	}
	
	.goods_image {
		width: 133.3upx;
		height: 133.3upx;
		border-radius: 8upx;
	}
	
	.goods_description {
		width: 75%;
	}
	
	.title_size {
		width: 85%;
	}
	
	.goods_title {
		color: #1a1a1a;
		font-size: 28upx;
		line-height: 40.6upx;
		margin-bottom: 26.6upx;
	}
	
	.goods_size {
		color: #1A1A1A;
		opacity: 0.5;
		font-size: 21upx;
	}
	
	.money_amount {
		width: 15%;
		margin-right: 33upx;
	}
	
	.goods_money {
		width: 100%;
		font-size: 21upx;
		text-align: right;
	}
	
	.goods_amount {
		width: 100%;
		color: #1A1A1A;
		opacity: 0.5;
		font-size: 21upx;
		align-self: center;
		text-align: right;
	}
	
	.separate_line {
		margin-left: 33upx;
		margin-right: 33upx;
		border-bottom-width: 0.5upx;
		border-color: rgba(0, 0, 0, 0.2);
	}
	
	.bottom_amount_money {
		display: flex;
		width: 100%;
		justify-content: flex-end;
		margin-top: 30upx;
	}
	
	._amount {
		margin-right: 10upx;
		font-size: 31upx;
		color: #1a1a1a;
		opacity: 0.5;
	}
	
	.need_pay {
		color: #1a1a1a;
		font-size: 28upx;
	}
	
	._money {
		color: #fa2a2d;
		font-size: 31upx;
		margin-right: 33upx;
	}
	
	.state_btn {
		display: flex;
		justify-content: flex-end;
		margin-top: 32.7upx;
		margin-right: 33upx;
	}
	
	._btn {
		width: 153upx;
		height: 58upx;
		text-align: center;
		color: $theme-color;
		font-size: 28upx;
		line-height: 58upx;
		border:3upx solid $theme-color;
		border-radius: 6upx;
	}
	
	.separate {
		height: 16.7upx;
		background-color: #000000;
		opacity: 0.05;
		margin-top: 23.3upx;
		margin-left: -33upx;
		margin-right: -33upx;
	}
	
	.align_items_center {
		align-items: center;
	}
	
	.justify_content_center {
		display: flex;
		justify-content: center;
	}
	
	.flex_column {
		display: flex;
		flex-direction: column;
	}
	
	.flex_row {
		display: flex;
		flex-direction: row;
	}
	
	.flex_end {
		display: flex;
		justify-content: flex-end;
	}
	
	.space_between {
		display: flex;
		justify-content: space-between;
	}
</style>
